<template>
    <el-dialog
        class="custom-modal"
        title="选择地址"
        :visible.sync="showDialog"
        append-to-body
        top="15vh"
        destroy-on-close
        :close-on-click-modal="false"
    >
        <template v-if="showDialog">
            <div><span>当前地址：</span>{{ address }}</div>
            <div class="address-info">
                <span>详细地址：</span>
                <el-input v-model="infoAddress" size="mini" :readonly="type === 'readonly'"></el-input>
            </div>
            <div class="key-words" v-if="type !== 'readonly'">
                <span>请输入关键字搜索地点：</span>
                <input type="text" id="tipinput" autocomplete="off" />
            </div>
            <div id="container" ref="containerRef"></div>
        </template>
        <div slot="footer" class="dialog-footer" v-if="type !== 'readonly'">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import markerImg from "@/assets/map-location.png";

@Component({
    name: "MapLocation"
})
export default class MapLocation extends Vue {
    // 地图实例
    map: any = null;
    placeSearch: any = null;
    // 获取地址
    geocoder: any = null;
    // 覆盖物/标记点
    marker: any = null;

    // 经度
    lng = 0;
    // 维度
    lat = 0;

    // 显示弹框
    showDialog = false;
    // 选择的资质
    address = "";
    // 输入详细地址
    infoAddress = "";
    type = "";
    // 初始化赋值
    once = true

    get AMap() {
        return this.$store.state.aMap;
    }

    async initPage() {
        const _aMap = this.AMap || (await this.$store.dispatch("loadAMap"));
        const AMap = _aMap;

        const center: any = this.lng ? [this.lng, this.lat] : null;
        this.map = new AMap.Map("container", {
            resizeEnable: true, // 是否监控地图容器尺寸变化,
            center,
            zoom: 13
        });
        const auto = new AMap.Autocomplete({
            input: "tipinput"
        });
        const placeSearch = new AMap.PlaceSearch({
            map: this.map
        });
        // 构造地点查询类
        AMap.event.addListener(auto, "select", (e: any) => {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name); // 关键字查询查询
            placeSearch.on("markerClick", (ev: any) => {
                this.marker.setPosition([ev.data.location.lng, ev.data.location.lat]);
                this.lng = ev.data.location.lng;
                this.lat = ev.data.location.lat;
                this.address = `${ev.data.pname}${ev.data.cityname}${ev.data.adname}`;
                this.infoAddress = ev.data.address;
            });
        });
        // 注册监听，当选中某条记录时会触发
        this.geocoder = new AMap.Geocoder();
        const icon = new AMap.Icon({
            image: markerImg,
            size: new AMap.Size(50, 50),
            imageSize: new AMap.Size(50, 50)
        });

        this.marker = new AMap.Marker({
            position: this.map.getCenter(),
            icon: icon,
            offset: new AMap.Pixel(-25, -50),
            // 设置是否可以拖拽
            draggable: this.type !== "readonly",
            cursor: "move",
            // 设置拖拽效果
            raiseOnDrag: false
        });

        this.marker.setMap(this.map);
        this.marker.on("dragging", this.draggMark);

        this.draggMark({
            lnglat: {
                lng: this.map.getCenter().lng,
                lat: this.map.getCenter().lat
            }
        });
    }

    // 拖拽标记点
    draggMark(e: any) {
        this.lng = e.lnglat.lng;
        this.lat = e.lnglat.lat;
        this.getAddress([e.lnglat.lng, e.lnglat.lat]);
    }

    // 查询详细地址
    getAddress(lnglat: any) {
        this.geocoder.getAddress(lnglat, (status: any, result: any) => {
            if (status === "complete" && result.regeocode) {
                const {
                    province,
                    city,
                    district,
                    township,
                    neighborhood
                } = result.regeocode.addressComponent;
                this.address = province + city + district;
                if (this.once) {
                    this.once = false;
                    if (!this.infoAddress) {
                        this.infoAddress = township + neighborhood;
                    }
                } else if (this.type !== "readonly") {
                    this.infoAddress = township + neighborhood;
                }
            } else {
                return false;
            }
        });
    }

    closeDialog() {
        this.infoAddress = "";
        this.address = "";
        this.lng = 0;
        this.lat = 0;
        this.showDialog = false;
    }

    save() {
        this.showDialog = false;
        this.$emit("updateAddress", {
            lng: this.lng,
            lat: this.lat,
            address: this.address,
            infoAddress: this.infoAddress
        });
    }

    show(data: any, type?: string) {
        if (data) {
            this.lng = data.longitude || 0;
            this.lat = data.latitude || 0;
            this.infoAddress = data.cityAddress || "";
            this.address = data.address || "";
        }
        if (type === "readonly") {
            this.type = "readonly";
        }
        this.showDialog = true;
        this.once = true;
        this.$nextTick(() => {
            this.initPage();
        });
    }
}
</script>

<style lang="scss" scoped>
.address-info {
    margin-top: 10px;
    @include flexLayout(flex, normal, center);
    span {
        width: 80px;
    }
}

.key-words {
    margin-top: 10px;
    display: flex;
    align-items: center;
    input {
        width: calc(100% - 160px);
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        padding: 0 15px;
        &:focus {
            outline: none;
            border: 1px solid #607d8b;
        }
    }
    span {
        width: 160px;
    }
}
#container {
    width: 100%;
    height: 500px;
    margin-top: 10px;
}
</style>

<style lang="scss">
.amap-sug-result {
    z-index: 4000;
}
</style>
